import { Component, ComponentRef, OnDestroy, Injector, Input, SimpleChange, ViewChild, ViewContainerRef} from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { AppMenuService } from '@app/shared/common/menu/app-menu.service';
import { AppNavigationService } from '@app/shared/layout/nav/app-navigation.service';
import { Router } from '@angular/router';
import { BreadcrumbItem } from '@app/shared/layout/nav/breadcrumb-item';
import { SeoModalComponent } from '../seo/seo-modal.component';
import { MenuExtendModalComponent } from './menu-extend-modal.component';
import { MenuInfoConfigModalComponent } from './menu-info-config-modal.component';
import { ContentListConfigItem, MenuInfoConfig, MenuInfoSyncServiceProxy } from '@shared/service-proxies/service-proxies';
import { TabDirective } from 'ngx-bootstrap/tabs';
import { IImageTextComponent } from './IImageText-component';
import { ImageTextService } from './imageText.service';

@Component({
    selector: 'menu-Info-container',
    templateUrl: './menu-Info-container.component.html'
})
export class MenuInfoContainerComponent extends AppComponentBase implements IImageTextComponent, OnDestroy {

    @Input() title: string;
    @Input() description: string;
    @Input() kind: number;
    @Input() breadcrumbs: BreadcrumbItem[];
    @Input() idName: string;

    @Input() blankPage: boolean = false;
    @Input() seo: boolean = true;

    @ViewChild('seoModal', { static: true }) seoModal: SeoModalComponent;
    @ViewChild('extendedDataModal', { static: true }) extendedDataModal: MenuExtendModalComponent;
    @ViewChild('jsonEditorModal', { static: true }) jsonEditorModal: MenuInfoConfigModalComponent;
    @ViewChild('vc2', { read: ViewContainerRef }) vc: ViewContainerRef;

    cmpRef: ComponentRef<any>;

    menuConfig: MenuInfoConfig;
    selectedTabId: string = 'contentTab';
    menuId: string;
    menuName: string;
    permissionDic: { [key: string]: boolean } = {};
    hasConfigPermission = this.permission.isGranted('Pages.Tenant.MenuInfo.Config');

    listData: { [key: string]: { [key: string]: any }[] } = {};
    data: { [key: string]: { [key: string]: any } } = {};
    Collapse: { [key: string]: boolean } = {};
    randomId :{ [key: string]: string}= {};
    formNameCache :{ [key: string]: string}= {};
    isTemporary :{ [key: string]: boolean}= {};
    listConfig: { [key: string]: ContentListConfigItem[]; }= {};
    saving = false;

    isModal = false;

    dataSynchronous = false;

    constructor(
        private _appMenuService: AppMenuService,
        private _appNavService: AppNavigationService,
        private _router: Router,
        private _imageTextService: ImageTextService,
        private _menuInfoSyncServiceProxy:MenuInfoSyncServiceProxy,
        injector: Injector
    ) {
        super(injector);
        this.menuConfig = this._imageTextService.getDefaultConfig();
        this.dataSynchronous = this.setting.getBoolean("App.Synchronous.DataSynchronous");
    }

    ngOnChanges(changes: SimpleChange) {
        if (changes['kind']) {
            if (this.kind) {
                this.breadcrumbs = this._appMenuService.getBreadcrumbsForMenu(this.kind);

                this.init();
            }

        }

        if (changes['idName']) {
            if (this.idName) {
                this.breadcrumbs = this._appNavService.getBreadcrumbsForSystemMenu(this.idName);
            }
        }
    }

    goToBreadcrumb(breadcrumb: BreadcrumbItem): void {
        if (!breadcrumb || !breadcrumb.routerLink) {
            return;
        }

        if (breadcrumb.navigationExtras) {
            this._router.navigate([breadcrumb.routerLink], breadcrumb.navigationExtras)
                .then(() => { this._router.onSameUrlNavigation = 'reload' });
        } else {
            this._router.navigate([breadcrumb.routerLink])
                .then(() => { this._router.onSameUrlNavigation = 'reload' });
        }
    }

    goSeoModal() {
        this.seoModal.show(this.menuId, this.kind, this.menuName);
    }

    goExtendedDataModal() {
        let formName = this.menuConfig.extended.formName;
        formName = KTUtil.toCamelCase(formName);
        let form = this.menuConfig.forms[formName];
        this.extendedDataModal.show(this.kind, this.menuId, this.permissionDic, form, ImageTextService.extendKey, null);
    }


    goConfigModal() {
        this.jsonEditorModal.show(this.kind);
    }

    callbackAfterSave(){
        
    }

    reloadPage() {
        this.init();
    }

    private init() {
        this._imageTextService.init(this, ()=>{
            this.selectedTabId = 'menuInfoTab';
        },()=>{
            if (this.menuConfig.imageText.enable && this.permissionDic['Pages.Tenant.MenuInfo.ImageText']) {
                if(this.blankPage){
                    this.selectedTabId = 'menuInfoTab';
                }else{
                    this.selectedTabId = 'contentTab';
                }
                this._imageTextService.initForms(this);
            }else{
                this.selectedTabId = 'contentTab';
            }
        });
    }

    onTabSelect(data: TabDirective): void {
        this.selectedTabId = data.id;
    }


    ngOnDestroy() {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
    }

    save() {
        this._imageTextService.save(this);
    }

    createNews(key: string) {
        this.openCreateOrEditModal(null, key);
    }

    editModule(record: { [key: string]: any }, key: string) {
        this.openCreateOrEditModal(record, key);
    }

    private openCreateOrEditModal(record: { [key: string]: any }, key: string) {
        let config = this._imageTextService.getConfigByKey(this, key);
        this.extendedDataModal.show(this.kind, this.menuId, this.permissionDic, config.form, key, record?.id);
    }

    imageTextUpdate(key) {
       this._imageTextService.imageTextUpdate(this, key);
    }

    getDisplayName(key){
        return this._imageTextService.getDisplayName(this,key);
    }
    synchorization(){
        this._imageTextService.synchorization(this);
    }
}
